<template>
  <div class="all">
 <div class="filter" >
     <div class="filter_item">
      姓名：<Input prefix="ios-contact" placeholder="Enter name" clearable  style="width: auto" v-model="emplName" />  
     </div>
     <div class="filter_item">
     性别：<Select v-model="sex"clearable style="width:200px">
        <Option v-for="item in sexs" :value="item.value" :key="item.key">{{ item.value }}</Option>
    </Select> 
     </div>
     <div class="filter_item">
    部门：<Select v-model="dept"clearable style="width:200px"  @on-open-change="getDeptList" @on-change="deptChange">
        <Option v-for="item in deptNames" :value="item.deptName" :key="item.id">{{item.deptName}}</Option>
    </Select>
     </div>
     <div class="filter_item">
            时间：<DatePicker type="date" placeholder="Select date" @on-change="dateChange" style="width: 200px"></DatePicker>
     </div>
     <div class="filter_item">
        电话：<Input v-model="phone"  :maxlength = "11" show-word-limit clearable   placeholder="请输入电话" style="width: 300px"  />
     </div>
          <div class="filter_item">
       身份证号码：<Input v-model="identy" :maxlength="18" show-word-limit clearable  placeholder="请输出身份证号码" style="width: 300px"  />
     </div>
          <div class="filter_item">
        工号：<Input v-model="emplAcco" placeholder="请输入工号" clearable  style="width: 300px" />
     </div>
          <div class="filter_item">
        密码：<Input v-model="password" type="password" clearable  placeholder="请输入密码" style="width: 300px" />
     </div>
       <div>
       <div class="filter_item" >
         <Button type="primary" @click="AddEmpl">新增</Button>
       </div>
       </div>
    </div>
  </div>
</template>

<script>
export default {
name:"AddEmployee",

data(){
  return{
      emplName:"",
      sexs:[
        {
          key:'男',
          value:'男'
        },
        {
          key:'女',
          value:'女'
        }
      ],
      rzdate:"",
      sex:"",
      dept:"",
      deptNames:[],
      phone:"",
      identy:"",
      emplAcco:"",
      password:"",
  }
},
methods:{   
   getDeptList(){
      this.$axios
      .post("/api/dept/getAllDept")
      .then(res =>{
        console.log(res.data.data);
        this.deptNames=res.data.data;

      })
    },
    deptChange(e){
      this.deptName=e;
    },
    dateChange(e){
      this.rzdate=e;
    },
      AddEmpl(){
        if(         
         this.emplName !=""&&
        this.deptName!=""&&
        this.sex !=""&&
        this.emplAcco !=""&&
        this.password !=""&&
        this.identy !=""&&
        this.rzdate !=""&&
        this.phone !=""){
          let data ={
         emplName:this.emplName,
         deptName:this.deptName,
         sex:this.sex,
         rzdate:this.rzdate,
         phone:this.phone,
         identy:this.identy,
         emplAcco:this.emplAcco,
         password:this.password
       };
       this.$axios.post("/api/empl/addEmpl",data)
      .then(res =>{
        let result = res.data.data;
        if(result == 1){
          alert("添加成功");
          this.$emit("on-close-modal", false);
        }
        else{
          alert("添加失败，已存在员工");
          this.$emit("on-close-modal", false);
        }
        
      })
        }
        else
        {
          alert("请填写完整！");
        }
     
    }
}


}
</script>

<style>
.filter{
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item{
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
</style>